<template>
  <div class="app-container">
    <ECard
      :ilabel="ilabel"
      mode="horizontal"
      leftTitle="系统名称"
      rightTitle="内容"
    >
      <template #left>
        <div class="title">系统名称</div>
        <div class="caidan">
          <div>
            <el-tree
              :data="data"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
            >
            </el-tree>
          </div>
        </div>
      </template>
      <template #right>
        <div style="position: relative; height: 100%">
          <ETable
            :data="tableData"
            :titleObj="titleObj"
            :page="pageInfo"
            operateWidth="80"
            :height="280"
            :loading="loading"
          >
            <template v-slot="{ scope }">
              <el-button @click="editModel(scope)" type="text" size="small"
                >修改</el-button
              >
            </template>
          </ETable>
          <div class="paginationBox">
            <Epagination
              :pageData="pageInfo"
              @handleCurrentChange="getData"
              @handleSizeChange="handleSizeChange"
            ></Epagination>
          </div>
        </div>
      </template>
    </ECard>
    <edit ref="edit"></edit>
  </div>
</template>

<script>
import ETable from "@/components/ETable/index2.vue";
import Epagination from "@/components/Epagination";
import ECard from "@/components/ECard";
import edit from "./edit.vue";
import { getqueryAllSystemMap } from "@/api/management/menu";
import { getBsBanner } from "@/api/management/banner";
export default {
  name: "baner",
  components: {
    ETable,
    Epagination,
    ECard,
    edit,
  },
  data() {
    return {
      ilabel: "",
      // 左侧树数据
      data: [],
      // 点击的左侧树的系统编码
      systemCode: "",
      // 分页数据
      pageInfo: {
        page: 1,
        size: 20,
        total: 0,
      },
      // 表格数据
      tableData: [],
      loading: false,
      // 表格头部
      titleObj: [
        // {
        //   prop: 'orgName',
        //   label: '所属运营单位',
        //   width: '',
        //   sortable: 'custom',
        //   minWidth: '94px'
        // },
        {
          prop: "bannerNo",
          label: "编号",
        },
        {
          prop: "bannerDesc",
          label: "描述",
        },
      ],
    };
  },
  created() {
    this.getTree();
  },
  methods: {
    // 获取厂家树
    async getTree() {
      let res = await getqueryAllSystemMap();
      if (res.data && res.data.bdata) {
        let key = Object.keys(res.data.bdata);
        let value = Object.values(res.data.bdata);
        let arr = key.map((item, index) => {
          return { label: value[index], value: key[index] };
        });
        this.data = arr;
      }
    },
    // 获取表格数据
    async getData() {
      this.loading = true;
      let res = await getBsBanner({
        currPage: this.pageInfo.page,
        pageSize: this.pageInfo.size,
        systemCode: this.systemCode,
      });
      if (res.data && res.data.bdata.total) {
        this.tableData = res.data.bdata.gdata;
        this.pageInfo.total = res.data.bdata.total;
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.loading = false;
    },
    // tree树点击
    handleNodeClick(data) {
      // 每次点击的时候需要重置右边的数据
      this.pageInfo = {
        page: 1,
        size: 20,
        total: 0,
      };
      console.log("行点击", data);
      this.systemCode = data.value;
      this.ilabel = data.label;
      this.getData();
    },
    // 页数切换
    handleSizeChange() {
      this.pageInfo.page = 1;
      this.getData();
    },
    // 新增/修改型号
    editModel(scope) {
      this.$refs.edit.modelOpen(scope);
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 14px;
  background-color: #66b1ff;
  color: #fff;
}
.caidan {
  width: 100%;
  height: calc(100% - 130px);
  border: 1px solid #ccc;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-dropdown {
    position: absolute;
    background-color: #fff;
    right: 0px;
    width: 20px;
  }
  .el-tree-node:focus > .el-tree-node__content .el-dropdown {
    background-color: #f5f7fa;
  }
  .el-tree-node__content:hover .el-dropdown {
    background-color: #f5f7fa;
  }

  .el-dropdown .el-button {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
// 分页样式 pagination
.paginationBox {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
}
</style>
